<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>复选框</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css">
    <![endif]-->
    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css">
    <![endif]-->
    <link rel="stylesheet" href="formDesign.css">
    <script type="text/javascript" src="../dialogs/internal.js"></script>
    <script type="text/javascript">
function createElement(type, name)
{
    var element = null;
    try {
        element = document.createElement('<'+type+' name="'+name+'">');
    } catch (e) {}
    if(element==null) {
        element = document.createElement(type);
        element.name = name;
    }
    return element;
}




/*删除tr*/
function fnDeleteRow(obj)
{
    var oTable = document.getElementById("options_table");
    while(obj.tagName !='TR')
    {
        obj = obj.parentNode;
    }
    oTable.deleteRow(obj.rowIndex);
}

/*生成tr*/
function fnAddComboTr(obj)
{
    var oTable = document.getElementById('options_table');
    var new_tr_node= oTable.insertRow(oTable.rows.length);
    var new_td_node0 = new_tr_node.insertCell(0),
        new_td_node1 = new_tr_node.insertCell(1),
        new_td_node2 = new_tr_node.insertCell(2);

    var sChecked = '';
    if(obj.checked) {
        sChecked = 'checked="checked"';
    }
    if(!obj.value) {
        obj.value = '';
    }
    new_td_node0.innerHTML = '<td><input type="checkbox" '+sChecked+'></td>';
    new_td_node1.innerHTML = '<td><input type="text" value="'+obj.value+'"  placeholder="选项值"></td>';
    new_td_node2.innerHTML ='<td><a title="删除" class="btn btn-small btn-default" href="javascript:void(0);" onclick="fnDeleteRow(this)"><i class="icon-ban-circle"></i></a></div></td>';
    return true;
}
function fnAdd() {
    fnAddComboTr({
        "checked":false,
        "value":''
    });
}
/*组合checkbox*/
function fnParseOptions(name)
{
    var oTable = document.getElementById('options_table');
    var nTr = oTable.getElementsByTagName('tr'),
        trLength = nTr.length,
        html="";
    for(var i=0;i<trLength;i++)
    {
        var inputs = nTr[i].getElementsByTagName('input');
        if(inputs.length>0)
        {
            if(!inputs[1].value) continue;
            var sChecked = '';
            if(inputs[0].checked) sChecked = 'checked="checked"';
            html += '<input name="'+name+'" value="'+inputs[1].value+'" '+sChecked+' type="checkbox"/>'+inputs[1].value+'&nbsp;';

        }
    }
    return html;

}
    </script>
</head>
<body>
<div class="content">
    <table class="table table-bordered table-striped">
     <tr>
        <th><span>控件名称</span><span class="label label-important">*</span></th>
    </tr>
    <tr>
        <td><input id="orgname" placeholder="必填项" type="text"/> </td>
    </tr>
    <tr>
        <td>
            <table class="table table-hover table-condensed" id="options_table">
                <tr>
                    <th>选中</th>
                    <th>选项值</th>
                    <th>操作</th>
                </tr>
                <!--tr>
                    <td><input type="checkbox" checked="checked"></td>
                    <td><input type="text" value="选项一"></td>
                    <td>
                        <div class="btn-group">
                            <a title="上移" class="btn btn-small btn-info" href="#"><i class="icon-white icon-arrow-up"></i></a>
                            <a title="下移" class="btn btn-small btn-info" href="#"><i class="icon-white icon-arrow-down"></i></a>
                            <a title="删除" class="btn btn-small btn-default"><i class="icon-ban-circle"></i></a>
                        </div>
                    </td>
                </tr-->

            </table>
            <a title="添加选项" class="btn btn-primary" onclick="fnAdd();">添加选项</a>
        </td>
    </tr>


    </table>
</div>
<script type="text/javascript">

dialog.oncancel = function () {};
dialog.onok = function (){
    if( $G('orgname').value == '') {
        alert('控件名称不能为空');
        return false;
    }
    var gTitle=$G('orgname').value;
    var options = fnParseOptions(gTitle);
    if(!options) {
        alert('请添加选项');
        return false;
    }
    editor.execCommand('insertHtml', options);

    return true;

};
</script>
</body>
</html>
